<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span>
          <el-tooltip class="item" effect="dark" content="触发器中任意条件满足都将触发当前联动,如果存在条件将判断条件" placement="top-start">
            <i class="el-icon-question" />
          </el-tooltip>
          <span>{{ $t('trigger') }}</span>
        </span>
        <div style="float: right">
          <el-button
            type="success"
            :disabled="!linkage.linkageTag"
            @click="insertOrUpdateLinkageTriggerToDevice"
          >{{ $t('confirm') }}
          </el-button>
          <el-button
            type="primary"
            :disabled="!linkage.linkageTag"
            @click="addExplainTrigger"
          >{{ $t('sensor') }}
          </el-button>
          <el-button
            type="primary"
            :disabled="!linkage.linkageTag"
            @click="addTimerTrigger"
          >{{ $t('timing') }}
          </el-button>
          <el-button
            type="primary"
            :disabled="!linkage.linkageTag"
            @click="addIntervalTrigger"
          >{{ $t('interval') }}
          </el-button>
          <el-button
            type="primary"
            :disabled="!linkage.linkageTag"
            @click="addTimer2Trigger"
          >{{ $t('timeSlot') }}
          </el-button>
        </div>
      </div>
      <el-table
        :show-header="false"
        :data="triggerList"
        style="min-height: 200px"
      >
        <el-table-column>
          <template slot-scope="scope">
            <div style="display: flex;justify-content: space-between">
              <div v-if="scope.row.type === 's'">
                <div>
                  <el-cascader
                    v-model="scope.row.selectedExplain"
                    style="width: 250px;margin-right: 5px"
                    filterable
                    :options="sensorWithExplainList"
                    expand-trigger="hover"
                  >
                    <template slot-scope="{ node, data }">
                      <span>{{ data.label }}</span>
                    </template>
                  </el-cascader>
                  <el-select
                    v-model="scope.row.logic"
                    style="margin-right: 5px"
                    clearable
                    filterable
                  >
                    <el-option :label="$t('greater')" value=">" />
                    <el-option :label="$t('less')" value="<" />
                    <el-option :label="$t('equal')" value="=" />
                  </el-select>
                  <el-input
                    v-model="scope.row.value"
                    style="width: 150px"
                    :placeholder="$t('value')"
                  />
                </div>
              </div>
              <div v-else-if="scope.row.type === 't'">
                <span style="margin-right: 20px">{{ $t('timing')+$t('trigger') }}</span>
                <el-time-picker
                  v-model="scope.row.timer"
                  value-format="HH:mm"
                  format="HH:mm"
                />
              </div>
              <div v-else-if="scope.row.type === 'i'">
                <span style="margin-right: 20px">{{ $t('interval')+$t('trigger') }}</span>
                <el-time-picker
                  v-model="scope.row.timer"
                  value-format="HH:mm"
                  format="HH:mm"
                />
              </div>
              <div v-else-if="scope.row.type === 't2'">
                <el-time-picker
                  v-model="scope.row.startDate"
                  style="margin-right: 5px"
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="$t('startDate')"
                />
                <el-time-picker
                  v-model="scope.row.endDate"
                  style="margin-right: 5px"
                  value-format="HH:mm"
                  format="HH:mm"
                  :placeholder="$t('endDate')"
                />
              </div>
              <el-button
                type="danger"
                class="el-icon-delete"
                @click="delTrigger(scope.row)"
              />
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import {
  insertOrUpdateLinkageTriggerToDevice,
  insertOrUpdateLinkageTriggerToServer,
  listLinkageTrigger
} from '@/api/iot/iotDeviceLinkageTriggerApi'
import { failureNotice, formatSensorType, successNotice } from '@/util/common'
import { listSensorWith } from '@/api/iot/iotDeviceSensorApi'
export default {
  name: 'LinakgeTrigger',
  props: {
    linkage: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      triggerList: [],
      sensorWithExplainList: []
    }
  },
  watch: {
    linkage: {
      deep: true,
      handler() {
        this.listLinkageTrigger()
      }
    }
  }, created() {
    this.listSensorWithExplain()
  }, methods: {
    formatSensorType(type) {
      return formatSensorType(this, type)
    },
    listSensorWithExplain() {
      listSensorWith({
        deviceId: this.linkage.deviceId,
        withExplain: true
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          const sensorWithExplainList = []
          for (let i = 0; i < data.length; i++) {
            const sensor = data[i]
            const item = {
              value: sensor.port,
              label: this.formatSensorType(sensor.type) + this.$t('port') + ':' + sensor.port + '  ' + sensor.sensorName,
              children: []
            }
            const sensorExplainListLen =
                sensor['explainList'].length
            for (let j = 0; j < sensorExplainListLen; j++) {
              const explain = sensor['explainList'][j]
              item.children.push({
                value: explain.keyName,
                label: explain.name
              })
            }
            sensorWithExplainList.push(item)
          }
          this.sensorWithExplainList = sensorWithExplainList
        } else {
          this.sensorWithExplainList = []
        }
        this.listLinkageTrigger()
      })
    },
    insertOrUpdateLinkageTriggerToDevice() {
      for (let i = 0, j = this.triggerList.length; i < j; i++) {
        const trigger = this.triggerList[i]
        if (trigger.type === 's') {
          if (
            trigger.selectedExplain == null ||
              trigger.selectedExplain === ''
          ) {
            failureNotice(this, this.$t('sensor'))
            return
          } else {
            trigger.port = trigger.selectedExplain[0]
            trigger.keyName = trigger.selectedExplain[1]
          }
          if (trigger.logic == null || trigger.logic === '') {
            failureNotice(this, this.$t('logic'))
            return
          }
          if (trigger.value == null || trigger.value === '') {
            failureNotice(this, this.$t('value'))
            return
          }
        } else if (trigger.type === 't') {
          if (trigger.timer == null || trigger.timer === '') {
            failureNotice(this, this.$t('time'))
            return
          }
        } else if (trigger.type === 't2') {
          if (
            trigger.startDate == null ||
              trigger.startDate === ''
          ) {
            failureNotice(this, this.$t('startDate'))
            return
          }
          if (
            trigger.endDate == null ||
              trigger.endDate === ''
          ) {
            failureNotice(this, this.$t('endDate'))
            return
          }
          trigger.timer =
              trigger.startDate + ' / ' + trigger.endDate
        }
      }
      if (this.linkage.type === 'device') {
        insertOrUpdateLinkageTriggerToDevice({
          linkageId: this.linkage.linkageId,
          triggerList: this.triggerList
        }).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listLinkageTrigger()
        })
      } else if (this.linkage.type === 'server') {
        insertOrUpdateLinkageTriggerToServer({
          linkageId: this.linkage.linkageId,
          triggerList: this.triggerList
        }).then(res => {
          const { code } = res
          if (code === '200') {
            successNotice(this)
          }
          this.listLinkageTrigger()
        })
      } else {
        failureNotice(this, this.$t('type'))
        return
      }
    },
    delTrigger(item) {
      for (let i = 0; i < this.triggerList.length; i++) {
        if (item === this.triggerList[i]) {
          this.triggerList.splice(i, 1)
        }
      }
    },
    addExplainTrigger() {
      this.triggerList.push({
        type: 's'
      })
    },
    addTimerTrigger() {
      this.triggerList.push({
        type: 't'
      })
    },
    addIntervalTrigger() {
      this.triggerList.push({
        type: 'i'
      })
    },
    addTimer2Trigger() {
      this.triggerList.push({
        type: 't2'
      })
    },
    listLinkageTrigger() {
      listLinkageTrigger({
        linkageId: this.linkage.linkageId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          let triggerList = data
          if (triggerList == null || triggerList.length === 0) {
            triggerList = []
          } else {
            for (const i in triggerList) {
              const trigger = triggerList[i]
              if (trigger.type === 's') {
                trigger.selectedExplain = [
                  trigger.port,
                  trigger.keyName
                ]
              } else if (trigger.type === 't2') {
                trigger.startDate = trigger.timer.split(' / ')[0]
                trigger.endDate = trigger.timer.split(' / ')[1]
              }
            }
          }
          this.triggerList = triggerList
        }
      })
    }
  }
}
</script>


